<template>
  <van-field
    :model-value="value"
    is-link
    readonly
    :label="`预约${title}时间`"
    :rules="[{ required: true, message: '请输入' }]"
    @click="showPicker = true"
  />

  <van-popup v-model:show="showPicker" position="bottom">
    <van-datetime-picker
      type="time"
      :title="`选择${title}时间`"
      :max-hour="maxHour"
      :min-hour="minHour"
      @confirm="onConfirm"
      @cancel="showPicker = false"
    />
  </van-popup>
</template>

<script lang="ts" setup>
import { ref, defineEmits, defineProps, computed } from 'vue'
import { useVModel } from '@vueuse/core'

const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  minHour: {
    type: [Number, String],
    default: 0,
  },
  maxHour: {
    type: [Number, String],
    default: 23,
  },
  mode: {
    type: Boolean,
    // true 开始, false 结束
    default: true,
  },
})

const emit = defineEmits(['update:modelValue'])

const value = useVModel(props, 'modelValue', emit)

const title = computed(() => (props.mode ? '开始' : '结束'))

const showPicker = ref(false)

function onConfirm(date: string) {
  showPicker.value = false
  value.value = date
}
</script>
